<template>
	<!-- 顶部推荐 -->
	<c-recommend />
	<div class="comp-centent sa-p-t-20">
		<el-form :inline="true" ref="ruleFormRef" :rules="rules" :model="state.from" class="demo-form-inline">
			<el-form-item label="货源搜索">
				<el-input v-model="state.from.keyword" placeholder="支持商品标题、品牌、类目搜索" clearable />
			</el-form-item>
			<el-form-item label="请选择类目">
				<el-cascader v-model="state.from.category" :options="categoryOptions" :props="cascaderProps" clearable />
			</el-form-item>
			<el-form-item label="服务履约">
				<div class="service-button-style">
					<el-checkbox-group v-model="state.from.service">
						<el-checkbox-button v-for="opt in serviceOpt" :key="opt.value" :value="opt.value">
							{{ opt.label }}
						</el-checkbox-button>
					</el-checkbox-group>
				</div>
			</el-form-item>
			<el-form-item label="价格区间" prop="price">
				<div class="price-button-style">
					<el-radio-group v-model="state.from.price">
						<el-radio-button v-for="opt in priceOpt" :key="opt.value" :value="opt.value">
							{{ opt.label }}
						</el-radio-button>
						<el-radio-button class="priceBox" value="custom">
							<div class="sa-flex">
								<el-input v-model="state.price1" placeholder="最低价" type="number" :min="0">
									<template #prefix>￥</template>
								</el-input>
								<div class="line">-</div>
								<el-input v-model="state.price2" placeholder="最高价" type="number" :min="0" :max="10000">
									<template #prefix>￥</template>
								</el-input>
							</div>
						</el-radio-button>
					</el-radio-group>
				</div>
			</el-form-item>
			<el-form-item>
				<el-button color="#3768FA" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>
		<div class="sortBox sa-flex sa-row-between">
			<div class="sortBox-left sa-flex">
				<div :class="['sortBox-item sa-flex',{active:state.sortMode == opt.key}]" 
					v-for="(opt,index) in state.sortData" :key="opt.key" @click="onSort(opt,index)">
					{{ opt.text}}
					<template v-if="opt.key !=='default'">
						<el-icon v-if="opt.value == 'asc'"><SortUp /></el-icon>
						<el-icon v-else-if="opt.value == 'des'"><SortDown /></el-icon>
						<el-icon v-else><Sort /></el-icon>
					</template>
				</div>
			</div>
			<div class="sortBox-right sa-p-r-20">
				<el-button link @click="btnClick(0)">铺货记录</el-button>
				<el-button link @click="btnClick(1)">收藏夹</el-button>
				<el-button link @click="btnClick(2)">铺货设置</el-button>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { api } from '../recommend.service';
import { useModal, usePagination } from '@/sheep/hooks';
import { cloneDeep ,isNil,omitBy} from 'lodash';
import { ElMessageBox, ElMessage } from 'element-plus';
import cRecommend from './c-recommend.vue';
import { useRouter } from 'vue-router';
const emit = defineEmits(['submit','sort','btn']);
const ruleFormRef = ref(null);
const router = useRouter();
const cascaderProps = {
	checkStrictly: true,
}
const serviceOpt = [
	{
		value: '24hfh',
		label: '24h发货',
	},
	{
		value: '48hfh',
		label: '48h发货',
	},
	{
		value: '7dth',
		label: '7天退货',
	},
	{
		value: 'jxzx',
		label: '鲸囍自选',
	},
	{
		value: 'jxyx',
		label: '鲸囍严选',
	},
]
const priceOpt = [
	{
		value: 'all',
		label: '全部',
	},
	{
		value: '0-50',
		label: '￥50元以下',
	},
	{
		value: '50-80',
		label: '￥50-￥80元',
	},
	{
		value: '80-100',
		label: '￥80-￥100元',
	},
	{
		value: '100-300',
		label: '￥101-￥300元',
	},
]
const categoryOptions = [
	{
		value: 'guide',
		label: 'Guide',
		children: [
			{
				value: 'disciplines',
				label: 'Disciplines',
				children: [
					{
						value: 'consistency',
						label: 'Consistency',
					},
					{
						value: 'feedback',
						label: 'Feedback',
					},
					{
						value: 'efficiency',
						label: 'Efficiency',
					},
					{
						value: 'controllability',
						label: 'Controllability',
					},
				],
			},
			{
				value: 'navigation',
				label: 'Navigation',
				children: [
					{
						value: 'side nav',
						label: 'Side Navigation',
					},
					{
						value: 'top nav',
						label: 'Top Navigation',
					},
				],
			},
		],
	},
	{
		value: 'component',
		label: 'Component',
		children: [
			{
				value: 'basic',
				label: 'Basic',
				children: [
					{
						value: 'layout',
						label: 'Layout',
					},
					{
						value: 'color',
						label: 'Color',
					},
					{
						value: 'typography',
						label: 'Typography',
					},
					{
						value: 'icon',
						label: 'Icon',
					},
					{
						value: 'button',
						label: 'Button',
					},
				],
			},
			{
				value: 'form',
				label: 'Form',
				children: [
					{
						value: 'radio',
						label: 'Radio',
					},
					{
						value: 'checkbox',
						label: 'Checkbox',
					},
					{
						value: 'input',
						label: 'Input',
					},
					{
						value: 'input-number',
						label: 'InputNumber',
					},
					{
						value: 'select',
						label: 'Select',
					},
					{
						value: 'cascader',
						label: 'Cascader',
					},
					{
						value: 'switch',
						label: 'Switch',
					},
					{
						value: 'slider',
						label: 'Slider',
					},
					{
						value: 'time-picker',
						label: 'TimePicker',
					},
					{
						value: 'date-picker',
						label: 'DatePicker',
					},
					{
						value: 'datetime-picker',
						label: 'DateTimePicker',
					},
					{
						value: 'upload',
						label: 'Upload',
					},
					{
						value: 'rate',
						label: 'Rate',
					},
					{
						value: 'form',
						label: 'Form',
					},
				],
			},
			{
				value: 'data',
				label: 'Data',
				children: [
					{
						value: 'table',
						label: 'Table',
					},
					{
						value: 'tag',
						label: 'Tag',
					},
					{
						value: 'progress',
						label: 'Progress',
					},
					{
						value: 'tree',
						label: 'Tree',
					},
					{
						value: 'pagination',
						label: 'Pagination',
					},
					{
						value: 'badge',
						label: 'Badge',
					},
				],
			},
			{
				value: 'notice',
				label: 'Notice',
				children: [
					{
						value: 'alert',
						label: 'Alert',
					},
					{
						value: 'loading',
						label: 'Loading',
					},
					{
						value: 'message',
						label: 'Message',
					},
					{
						value: 'message-box',
						label: 'MessageBox',
					},
					{
						value: 'notification',
						label: 'Notification',
					},
				],
			},
			{
				value: 'navigation',
				label: 'Navigation',
				children: [
					{
						value: 'menu',
						label: 'Menu',
					},
					{
						value: 'tabs',
						label: 'Tabs',
					},
					{
						value: 'breadcrumb',
						label: 'Breadcrumb',
					},
					{
						value: 'dropdown',
						label: 'Dropdown',
					},
					{
						value: 'steps',
						label: 'Steps',
					},
				],
			},
			{
				value: 'others',
				label: 'Others',
				children: [
					{
						value: 'dialog',
						label: 'Dialog',
					},
					{
						value: 'tooltip',
						label: 'Tooltip',
					},
					{
						value: 'popover',
						label: 'Popover',
					},
					{
						value: 'card',
						label: 'Card',
					},
					{
						value: 'carousel',
						label: 'Carousel',
					},
					{
						value: 'collapse',
						label: 'Collapse',
					},
				],
			},
		],
	},
	{
		value: 'resource',
		label: 'Resource',
		children: [
			{
				value: 'axure',
				label: 'Axure Components',
			},
			{
				value: 'sketch',
				label: 'Sketch Templates',
			},
			{
				value: 'docs',
				label: 'Design Documentation',
			},
		],
	},
]
const state = reactive({
	price1: '',
	price2: '',
	from:{
		keyword: '',
		price: 'all',
		category: '',
		service: [],
		region: '',
		date: '',
		sort:''
	},
	sortMode:'default',
	sortData:[
		{
			text: '综合排序',
			key:'default',
			value: 'default',
		},
		{
			text: '销量',
			key:'sales',
			value: '',
		},
		{
			text: '上新时间',
			key:'new',
			value: '',
		},
		{
			text: '采购价',
			key:'price',
			value: '',
		}
	],
})
const rules = {
	price: [{
		validator: (rule, value, callback) => {
			if (value === 'custom') {
				let mesage = '';
				if(state.price1 === '' || state.price2 === ''){
					mesage = '请输入正确的自定义价格区间'
				} else if (state.price1 > state.price2) {
					mesage = '最低价不能大于最高价'
				} else if (state.price1 < 0 || state.price2 < 0) {
					mesage = '价格不能小于0'
				} else if (state.price1 === state.price2) {
					mesage = '最低价不能等于最高价'
				}
				callback(new Error(mesage))
			} else{
				callback()
			}
		}, trigger: 'blur'
	}],
}
onMounted(() => {
})
function btnClick(i){
	emit('btn',i)
}
function onSort(opt,index){
	if(state.sortMode == opt.key){
		console.log('切换排序')
		if(state.sortMode != 'default'){
			opt.value =  opt.value == 'des' ? 'asc' :'des';
		}
	}else{
		console.log('切换排序模式')
		state.sortMode = opt.key;
		if(state.sortMode != 'default' && !opt.value){
			opt.value =  opt.value == 'des' ? 'asc' :'des';
		}
	}
}
function cleanFlatObject(obj) {
  return omitBy(obj, (val) =>
    isNil(val) || val === '' || Number.isNaN(val)
  )
}
const onSubmit = () => {
	ruleFormRef.value.validate(valid => {
		if (valid) {
			console.log('submit!',cleanFlatObject(cloneDeep(state.from)))

		} else {
			ElMessage({
				type:'error',
				message:'请检查输入内容是否完整'
			})
			return false
		}
	})
}
function getData() {
}

</script>

<style lang="scss">
.priceBox {
	.el-radio-button__inner {
		padding: 0 !important;
	}

	.el-input__wrapper {
		border: 0px solid transparent !important;
		background-color: transparent;
	}

	.el-input {
		width: 110px !important;
		margin-right: 30px !important;
		height: 32px !important;
		--el-border-color: rgba(255, 255, 255, 0.0),
			--el-input-focus-border-color: rgba(255, 255, 255, 0.0),
			--el-input-focus-border-width: 0px,
			--el-input-hover-border-color: rgba(255, 255, 255, 0.0),
			--el-input-hover-border-width: 0px,
			--el-input-bg-color: rgba(0, 0, 0, 0.8)
	}
}

.is-active {
	.el-input__inner {
		color: #fff;
	}
}

.demo-form-inline {
	.el-form-item__label {
		font-size: 16px !important;
		font-weight: 600;
		color: #333333;
	}

	.el-input {
		--el-input-width: 220px;
	}

	.el-select {
		--el-select-width: 220px;
	}
}

.price-button-style,
.service-button-style {
	transform: translateY(-3px);

	.el-checkbox-button,
	.el-radio-button {
		margin-right: 10px;

	}

	.el-checkbox-button__inner,
	.el-radio-button__inner {
		border-color: transparent !important;
		background-color: #F7F7F7;
		border-radius: 4px !important;

		&:hover {
			color: #3768FA;
		}

	}

	.is-checked,
	.is-active {

		.el-checkbox-button__inner,
		.el-radio-button__inner {
			background-color: #3768FA !important;
			color: #fff;

		}
	}
}

.comp-centent {
	background-color: #fff;
	position: sticky;
	top: 0;
	z-index: 10;
	.sortBox{
		padding-bottom: 16px;
		.sortBox-left{
			.sortBox-item{
				margin-right: 4px;
				justify-content: center;
				width: 90px;
				height: 32px;
				cursor: pointer;
				color: #666;
				border: 1px solid #666;
				font-size: 16px;
				.el-icon{
					margin-left: 4px;
					color: #666;
				}
			}
			.active{
				color: #3768FA;
				font-weight: 600;
				border: 1px solid #3768FA;
				.el-icon{
					color: #3768FA;
				}
			}
		}
	}
}
</style>